<header class="modal-header" data-test-modal="webhook-form">
    <h1 data-test-text="title">{{if webhook.isNew "New" "Edit"}} webhook</h1>
</header>
<button class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
    {{svg-jar "close"}}
</button>

<div class="modal-body">
    <fieldset>
        {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}}
            <label for="webhook-name" class="fw6">Name</label>
            {{gh-text-input
                value=(readonly webhook.name)
                input=(action (mut webhook.name) value="target.value")
                focus-out=(action "validate" "name" target=webhook)
                id="webhook-name"
                name="name"
                class="gh-input mt1"
                placeholder="Webhook name..."
                autofocus="autofocus"
                autocapitalize="off"
                autocorrect="off"
                data-test-input="webhook-name"}}
            {{gh-error-message errors=webhook.errors property="name" data-test-error="webhook-name"}}
        {{/gh-form-group}}
    </fieldset>
    <fieldset>
        {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}}
            <label for="webhook-event" class="fw6">Event</label>
            <span class="gh-select">
                {{one-way-select webhook.event
                    options=availableEvents
                    optionValuePath="event"
                    optionLabelPath="name"
                    optionTargetPath="event"
                    groupLabelPath="group"
                    class="mt1"
                    includeBlank=true
                    prompt="Select an event"
                    update=(action "selectEvent")
                    id="webhook-event"
                    name="event"
                    data-test-select="webhook-event"}}
                {{svg-jar "arrow-down-small"}}
            </span>
            {{gh-error-message errors=webhook.errors property="event" data-test-error="webhook-event"}}
        {{/gh-form-group}}
    </fieldset>
    <fieldset>
        {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}}
            <label for="webhook-targetUrl" class="fw6">Target URL</label>
            {{gh-text-input
                value=(readonly webhook.targetUrl)
                input=(action (mut webhook.targetUrl) value="target.value")
                focus-out=(action "validate" "targetUrl" target=webhook)
                id="webhook-targetUrl"
                name="targetUrl"
                class="gh-input mt1"
                placeholder="Webhook target URL..."
                autofocus="autofocus"
                autocapitalize="off"
                autocorrect="off"
                data-test-input="webhook-targetUrl"}}
            {{gh-error-message errors=webhook.errors property="targetUrl" data-test-error="webhook-targetUrl"}}
        {{/gh-form-group}}
    </fieldset>
    {{#if config.enableDeveloperExperiments}}
        <fieldset>
            {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}}
                <label for="webhook-secret" class="fw6">Secret</label>
                {{gh-text-input
                    value=(readonly webhook.secret)
                    oninput=(action (mut webhook.secret) value="target.value")
                    focus-out=(action "validate" "secret" target=webhook)
                    id="webhook-secret"
                    name="secret"
                    class="gh-input mt1"
                    placeholder="Webhook secret..."
                    autofocus="autofocus"
                    autocapitalize="off"
                    autocorrect="off"
                    data-test-input="webhook-secret"}}
                {{gh-error-message errors=webhook.errors property="secret" data-test-error="webhook-secret"}}
            {{/gh-form-group}}
        </fieldset>
    {{/if}}
    {{#if error}}
        <p class="red">{{error}}</p>
    {{/if}}
</div>

<div class="modal-footer">
    <button
        class="gh-btn"
        {{action "closeModal"}}
        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
        {{action (optional noop) on="mouseDown"}}
        data-test-button="cancel-webhook"
    >
        <span>Cancel</span>
    </button>
    {{gh-task-button buttonText
        successText=successText
        task=saveWebhook
        class="gh-btn gh-btn-green gh-btn-icon"
        data-test-button="save-webhook"}}
</div>
